<template>
	<view>
		<view class="wrap">
			<view class="wrap-list">
				<view class="item" v-if="isShowArea === true">
					<view class="title-bg flex align-center just-between">
						<view class="choose" @click="onCoutryChoose()">
							<image v-if="isAllCountry"
								:src="$staticImagePath('publish/choose_all.png')" />
							
							<image
								v-else
								:src="$staticImagePath('publish/choose_normal.png')"
							/>
						</view>
					
						<view class="title f-28">全国</view>
					</view>
				</view>
				
				<block v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="title-bg flex align-center just-between">
							<view class="choose" @click="onProvinceChoose(index)">
								<image
									v-if="item.choose === '0'"
									:src="$staticImagePath('publish/choose_normal.png')"
								/>
								<image
									v-else-if="item.choose === '1'"
									:src="$staticImagePath('publish/choose_half.png')"
								/>
								<image
									v-else-if="item.choose === '2'"
									:src="$staticImagePath('publish/choose_all.png')"
								/>
							</view>

							<view class="title f-28">{{ item.name }}</view>

							<view class="extend" @click="onProvinceExtend(index)" v-if="item.children.length > 0">
								<image v-if="item.isShow" :src="$staticImagePath('publish/close.png')" />
								<image v-else :src="$staticImagePath('publish/open.png')" />
							</view>
						</view>

						<view class="city-list" v-if="item.isShow">
							<block v-for="(city, idx) in item.children" :key="idx">
								<view class="city-item">
									<view class="title-bg flex align-center just-between">
										<view class="choose" @click="onCityChoose(index, idx)">
											<image
												v-if="city.choose === '0'"
												:src="$staticImagePath('publish/choose_normal.png')"
											/>
											<image
												v-else-if="city.choose === '1'"
												:src="$staticImagePath('publish/choose_half.png')"
											/>
											<image
												v-else-if="city.choose === '2'"
												:src="$staticImagePath('publish/choose_all.png')"
											/>
										</view>

										<view class="title f-28">{{ city.name }}</view>

										<view
											class="extend"
											@click="onCityExtend(index, idx)"
											v-if="city.children.length > 0 && isShowArea === true"
										>
											<image v-if="city.isShow" :src="$staticImagePath('publish/close.png')" />
											<image v-else :src="$staticImagePath('publish/open.png')" />
										</view>
									</view>

									<view class="area-list" v-if="city.isShow && isShowArea === true">
										<block v-for="(area, j) in city.children" :key="j">
											<view class="title-bg flex align-center">
												<view class="choose" @click="onAreaChoose(index, idx, j)">
													<image
														v-if="area.choose"
														:src="$staticImagePath('publish/choose_all.png')"
													/>
													<image
														v-else
														:src="$staticImagePath('publish/choose_normal.png')"
													/>
												</view>

												<view class="title f-28">{{ area.name }}</view>
											</view>
										</block>
									</view>
								</view>
							</block>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="footer safe-area flex align-center just-center">
			<view class="sure-btn theme-gradient-btn f-30" @click="onSure">确定</view>
		</view>
	</view>
</template>

<script>
	import { getAreaList } from "@/API/common.js";
	export default {
		data() {
			return {
				before: "",
				list: [],
				type: 0, //0是默认  1:运费
				isShowArea: true, //是否显示区
				
				isAllCountry: false, //全国
			};
		},
		onLoad(options) {
			this.before = options.before;
			if (options.type) {
				this.type = parseInt(options.type);
			}
			if (options.isShowArea) {
				this.isShowArea = options.isShowArea;
			}
			this.getData();
		},
		methods: {
			/**
			 * 全国选择
			 */
			onCoutryChoose() {
				this.isAllCountry = !this.isAllCountry;
				var choose = this.isAllCountry === true ? '2' : '0';
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].choose = choose;
					
					for (let j = 0; j < this.list[i].children.length; j++) {
						this.list[i].children[j].choose = choose;
						for (let m = 0; m < this.list[i].children[j].children.length; m++) {
							this.list[i].children[j].children[m].choose = this.isAllCountry;
						}
					}
				}
				this.onCalculationChoose();
			},
			/**
			 * 省打开
			 */
			onProvinceExtend(index) {
				this.list[index].isShow = !this.list[index].isShow;
			},
			/**
			 * 市打开
			 */
			onCityExtend(index, cityIndex) {
				this.list[index].children[cityIndex].isShow = !this.list[index].children[cityIndex].isShow;
			},
			/**
			 * 省选择
			 */
			onProvinceChoose(index) {
				const current = this.list[index].choose;
				if (current === "2") {
					this.list[index].choose = "0";
					for (let i = 0; i < this.list[index].children.length; i++) {
						this.list[index].children[i].choose = "0";
						for (let j = 0; j < this.list[index].children[i].children.length; j++) {
							this.list[index].children[i].children[j].choose = false;
						}
					}
				} else {
					this.list[index].choose = "2";
					for (let i = 0; i < this.list[index].children.length; i++) {
						this.list[index].children[i].choose = "2";
						for (let j = 0; j < this.list[index].children[i].children.length; j++) {
							this.list[index].children[i].children[j].choose = true;
						}
					}
				}
				this.onCalculationChoose();
			},
			/**
			 * 市选择
			 */
			onCityChoose(index, cityIndex) {
				const current = this.list[index].children[cityIndex].choose;
				if (current === "2") {
					this.list[index].children[cityIndex].choose = "0";
					for (let i = 0; i < this.list[index].children[cityIndex].children.length; i++) {
						this.list[index].children[cityIndex].children[i].choose = false;
					}
				} else {
					this.list[index].children[cityIndex].choose = "2";
					for (let i = 0; i < this.list[index].children[cityIndex].children.length; i++) {
						this.list[index].children[cityIndex].children[i].choose = true;
					}
				}
				this.onCalculationChoose();
			},

			/**
			 * 区域选择
			 */
			onAreaChoose(index, cityIndex, areaIndex) {
				this.list[index].children[cityIndex].children[areaIndex].choose =
					!this.list[index].children[cityIndex].children[areaIndex].choose;

				this.onCalculationChoose();
			},

			/**
			 * 计算选择
			 */
			onCalculationChoose() {
				for (var i = 0; i < this.list.length; i++) {
					var cityCount = this.list[i].children.length;
					var cityChoose = 0;
					for (var j = 0; j < this.list[i].children.length; j++) {
						var areaCount = this.list[i].children[j].children.length;
						var areaChoose = 0;
						for (var k = 0; k < this.list[i].children[j].children.length; k++) {
							if (this.list[i].children[j].children[k].choose) {
								areaChoose++;
							}
						}
						if (areaCount === areaChoose && areaCount > 0) {
							this.list[i].children[j].choose = "2";
							cityChoose++;
						} else if (areaChoose > 0) {
							this.list[i].children[j].choose = "1";
							cityChoose += 0.5;
						} else {
							this.list[i].children[j].choose = "0";
						}
					}
					if (cityCount === cityChoose && cityCount > 0) {
						this.list[i].choose = "2";
					} else if (cityChoose > 0) {
						this.list[i].choose = "1";
					} else {
						this.list[i].choose = "0";
					}
				}

				this.$set(this.list);
			},

			/**
			 * 确定
			 */
			onSure() {
				if (this.isAllCountry === true) {
					uni.$emit("areaChoose", "全国");
					uni.navigateBack();
					return;
				}
				var chooseList = [];
				var chooseItem = [];
				for (var i = 0; i < this.list.length; i++) {
					var chooseCity = [];
					var isAllArea = false;
					var chooseCityItem = [];
					for (var j = 0; j < this.list[i].children.length; j++) {
						var chooseArea = [];
						var chooseAreaItem = [];
						for (var k = 0; k < this.list[i].children[j].children.length; k++) {
							if (this.list[i].children[j].children[k].choose) {
								let area = `${this.list[i].name}/${this.list[i].children[j].name}/${this.list[i].children[j].children[k].name}`;
								chooseArea.push(area);
								chooseAreaItem.push([
									this.list[i],
									this.list[i].children[j],
									this.list[i].children[j].children[k],
								]);
							}
						}
						if (chooseArea.length === this.list[i].children[j].children.length) {
							isAllArea = true;
							let area = `${this.list[i].name}/${this.list[i].children[j].name}/全部`;
							chooseCity.push(area);
							chooseCityItem.push([this.list[i], this.list[i].children[j]]);
						} else {
							chooseCity = chooseCity.concat(chooseArea);
							chooseCityItem = chooseCityItem.concat(chooseAreaItem);
						}
					}
					if (chooseCity.length === this.list[i].children.length && isAllArea === true) {
						let area = `${this.list[i].name}/全部/全部`;
						chooseList.push(area);
						chooseItem.push([this.list[i]]);
					} else {
						chooseList = chooseList.concat(chooseCity);
						chooseItem = chooseItem.concat(chooseCityItem);
					}
				}
				if (chooseList.length === 0) {
					this.$st.show("请选择地区");
					return;
				}
				if (this.type === 0) {
					uni.$emit("areaChoose", chooseList.join(","));
				} else if (this.type === 1) {
					uni.$emit("areaChoose", {
						name: chooseList.join(","),
						list: chooseItem,
					});
				}
				uni.navigateBack();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getAreaList().then((res) => {
					for (let i = 0; i < res.data.length; i++) {
						res.data[i]["isShow"] = false;
						res.data[i]["choose"] = "0";

						for (let j = 0; j < res.data[i].children.length; j++) {
							res.data[i].children[j]["isShow"] = false;
							res.data[i].children[j]["choose"] = "0";

							for (let k = 0; k < res.data[i].children[j].children.length; k++) {
								res.data[i].children[j].children[k]["choose"] = false;
							}
						}
					}
					this.list = res.data;

					this.calculationBeforeChoose();
				});
			},
			/**
			 * 计算之前选择的数据
			 */
			calculationBeforeChoose() {
				// 选择已有地址
				if (this.before !== "") {
					if (this.before === "全国") {
						this.onCoutryChoose();
					} else {
						var chooseArray = this.before.split(",");
						
						chooseArray.map((name) => {
							const array = name.split("/");
							for (let i = 0; i < this.list.length; i++) {
								const provinceName = this.list[i].name;
								if (provinceName === array[0]) {
									for (let j = 0; j < this.list[i].children.length; j++) {
										const cityName = this.list[i].children[j].name;
										if (array[1] === "全部" || cityName === array[1]) {
											for (let k = 0; k < this.list[i].children[j].children.length; k++) {
												const areaName = this.list[i].children[j].children[k].name;
												if (array[2] === "全部" || areaName === array[2]) {
													this.list[i].children[j].children[k]["choose"] = true;
												}
											}
										}
									}
								}
							}
						});
						this.$set(this.list);
						this.onCalculationChoose();
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.wrap-list {
			width: 100%;
			overflow: hidden;

			.item {
				width: 100%;
				border-bottom: 2rpx solid #eeeeee;
				overflow: hidden;

				.title-bg {
					width: 100%;
					height: 80rpx;
					overflow: hidden;

					.choose {
						width: 40rpx;
						height: 40rpx;

						> image {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						margin-left: 20rpx;
						margin-right: 20rpx;
						flex: 1;
						overflow: hidden;
						color: #121212;
					}

					.extend {
						width: 40rpx;
						height: 40rpx;

						> image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.city-list {
					width: 100%;
					padding: 0 30rpx;
					box-sizing: border-box;
					overflow: hidden;

					.city-item {
						width: 100%;
						overflow: hidden;

						.area-list {
							width: 100%;
							padding: 0 30rpx;
							box-sizing: border-box;
							overflow: hidden;

							.area-item {
								width: 100%;
								overflow: hidden;
							}
						}
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 99;
		height: 120rpx;
		box-sizing: content-box;
		background-color: white;
	}
</style>
